import 'package:flutter/material.dart';
import 'package:flutter_axrjc/datasource/network/bean/ArticleBean.dart';
import 'package:flutter_axrjc/datasource/network/bean/ArticleTabBean.dart';
import 'package:flutter_axrjc/routes.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/util/Util.dart';
import 'package:flutter_axrjc/widget/CachePage.dart';
import 'package:flutter_axrjc/widget/common_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'logic.dart';

class KnowledgePage extends StatelessWidget {
  const KnowledgePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<KnowledgeLogic>();
    final state = Get.find<KnowledgeLogic>().state;

    return CachePage(
      child: Scaffold(
        body: Column(
          children: [
            Container(
              color: Colors.white,
              child: SafeArea(
                child: Column(
                  children: [
                    Stack(
                      children: [
                        Container(
                          color: Colors.white,
                          width: Get.width,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              InkWell(
                                onTap: () {
                                  Get.toNamed(MainRoutes.noticeSetting);
                                },
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Column(
                                    children: [
                                      Image.asset(
                                        'assets/main/notice.png',
                                        scale: 2,
                                      ),
                                      const Text(
                                        "提醒",
                                        style: TextStyle(fontSize: 12),
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        const Positioned.fill(
                            child: Center(
                          child: Text(
                            "知识社区",
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 16),
                          ),
                        ))
                      ],
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: SmartRefresher(
                header: reFreshHeader(),
                footer: loadFooter(),
                enablePullDown: true,
                onRefresh: () {
                  logic.getTopThree();
                },
                controller: logic.refreshController,
                child: Padding(
                  padding: const EdgeInsets.all(15),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Obx(() {
                          if (state.topThree.isEmpty) {
                            return Container();
                          }
                          return KnowledgeItem(
                            topThree: state.topThree,
                            tab: ArticleTabBean(
                                categoryName: "护眼知识", categoryId: ""),
                          );
                        }),
                        Obx(() {
                          if (state.typeList.isEmpty) {
                            return Container();
                          }
                          return ListView.builder(
                            padding: EdgeInsets.zero,
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: state.typeList.length,
                            itemBuilder: (BuildContext context, int index) {
                              var bean = state.typeList[index];
                              return KnowledgeItem(
                                  topThree: bean.three, tab: bean.tab);
                            },
                          );
                        }),
                      ],
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
        // floatingActionButton: FloatingActionButton(
        //   shape: const CircleBorder(),
        //   child: const Icon(Icons.add),
        //   onPressed: () {
        //     Get.toNamed(MainRoutes.post);
        //   },
        // ),
      ),
    );
  }
}

class KnowledgeItem extends StatelessWidget {
  final List<ArticleBean> topThree;
  final ArticleTabBean tab;

  const KnowledgeItem({super.key, required this.topThree, required this.tab});

  @override
  Widget build(BuildContext context) {
    var col = Util.shuffleGradient();
    return topThree.length != 3
        ? Container()
        : Column(
            children: [
              InkWell(
                onTap: () {
                  if (tab.categoryId?.isEmpty == true) {
                    Get.toNamed(MainRoutes.knowledgeForEyeWithType);
                  } else {
                    Get.toNamed(MainRoutes.knowledgeForEye, arguments: tab);
                  }
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Container(
                          width: 5,
                          height: 20,
                          decoration: BoxDecoration(
                              color: orangeColor,
                              borderRadius: BorderRadius.circular(10)),
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Text("${tab.categoryName}"),
                      ],
                    ),
                    const Row(
                      children: [
                        Text(
                          "更多",
                          style: TextStyle(color: orangeColor),
                        ),
                        Icon(
                          Icons.arrow_right,
                          color: orangeColor,
                        )
                      ],
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              IntrinsicHeight(
                child: topThree.length != 3
                    ? Container()
                    : Row(
                        children: [
                          Expanded(
                              child: InkWell(
                            onTap: () {
                              Get.toNamed(MainRoutes.knowledgeDetail,
                                  arguments: topThree[0]);
                            },
                            child: Container(
                              height: 180.h,
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                      begin: Alignment.topRight,
                                      end: Alignment.bottomLeft,
                                      colors: col[0]),
                                  borderRadius: BorderRadius.circular(5)),
                              child: Stack(
                                children: [
                                  Positioned(
                                    bottom: 5,
                                    right: 5,
                                    child: Image.asset(
                                      'assets/main/camera.png',
                                      width: 110,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.symmetric(
                                              vertical: 5),
                                          child: Text(
                                            '${topThree[0].articleTitle}',
                                            maxLines: 2,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                                color: Colors.white,
                                                fontSize: 16),
                                          ),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.symmetric(
                                              vertical: 5),
                                          child: Text(
                                            '${topThree[0].articleContent}',
                                            maxLines: 2,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                                color: Colors.white,
                                                fontSize: 14),
                                          ),
                                        ),
                                        const Spacer(),
                                        Padding(
                                          padding: const EdgeInsets.all(5),
                                          child: Row(
                                            children: [
                                              const Expanded(
                                                child: Text(
                                                  '100人看过',
                                                  style: TextStyle(
                                                      fontSize: 9,
                                                      color: Colors.white),
                                                ),
                                              ),
                                              Container(
                                                  padding: const EdgeInsets
                                                      .symmetric(
                                                      horizontal: 10,
                                                      vertical: 5),
                                                  decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              20),
                                                      color: Colors.white,
                                                      border: Border.all(
                                                          color: orangeColor,
                                                          width: 2)),
                                                  child: const Row(
                                                    children: [
                                                      Icon(
                                                        Icons.play_arrow,
                                                        color: orangeColor,
                                                      ),
                                                      Text(
                                                        '点击前往',
                                                        style: TextStyle(
                                                            fontSize: 12),
                                                      ),
                                                    ],
                                                  )),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )),
                          const SizedBox(
                            width: 10,
                          ),
                          Expanded(
                              child: IntrinsicWidth(
                            child: Column(
                              children: [
                                Expanded(
                                  child: InkWell(
                                    onTap: () {
                                      Get.toNamed(MainRoutes.knowledgeDetail,
                                          arguments: topThree[1]);
                                    },
                                    child: Container(
                                      padding: const EdgeInsets.all(8),
                                      height: 64.h,
                                      width: double.infinity,
                                      decoration: BoxDecoration(
                                          gradient: LinearGradient(
                                              begin: Alignment.topLeft,
                                              end: Alignment.bottomRight,
                                              colors: col[1]),
                                          borderRadius:
                                              BorderRadius.circular(5)),
                                      child: Stack(
                                        children: [
                                          Positioned(
                                              bottom: -10,
                                              right: 0,
                                              top: 0,
                                              child: Image.asset(
                                                'assets/main/articlepath.png',
                                              )),
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Padding(
                                                padding:
                                                    const EdgeInsets.symmetric(
                                                        vertical: 8),
                                                child: Text(
                                                  '${topThree[1].articleTitle}',
                                                  maxLines: 1,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                  style: const TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 16),
                                                ),
                                              ),
                                              Text(
                                                '${topThree[1].articleContent}',
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                                style: const TextStyle(
                                                    color: Colors.white),
                                              ),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                const SizedBox(
                                  height: 10,
                                ),
                                Expanded(
                                  child: InkWell(
                                    onTap: () {
                                      Get.toNamed(MainRoutes.knowledgeDetail,
                                          arguments: topThree[2]);
                                    },
                                    child: Container(
                                      width: double.infinity,
                                      padding: const EdgeInsets.all(8),
                                      height: 64.h,
                                      decoration: BoxDecoration(
                                          gradient: LinearGradient(
                                              begin: Alignment.topLeft,
                                              end: Alignment.bottomRight,
                                              colors: col[2]),
                                          borderRadius:
                                              BorderRadius.circular(5)),
                                      child: Stack(
                                        children: [
                                          Positioned(
                                              bottom: -10,
                                              right: 0,
                                              top: 0,
                                              child: Image.asset(
                                                'assets/main/articlepath.png',
                                              )),
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Padding(
                                                padding:
                                                    const EdgeInsets.symmetric(
                                                        vertical: 8),
                                                child: Text(
                                                  '${topThree[2].articleTitle}',
                                                  maxLines: 1,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                  style: const TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 16),
                                                ),
                                              ),
                                              Text(
                                                topThree[2].articleContent ??
                                                    '',
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                                style: const TextStyle(
                                                    color: Colors.white),
                                              ),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          )),
                        ],
                      ),
              ),
              const SizedBox(
                height: 15,
              ),
            ],
          );
  }
}
